<template>
	<div class="stu">
		<div class="header">
			<span>{{ msg }}</span>
			<span>
				<i class="el-icon-message-solid"></i>
				消息通知
			</span>
			<router-link to="#" @click.native="jump">
				<a>{{ user }}</a>
			</router-link>
		</div>
		<div class="avatar">
			<el-avatar :size="140" src="#" @error="errorHandler" id="head"><img src="../../assets/bear.png" width="140px" height="140px"/></el-avatar>
			<span class="user">Dreity</span>
		</div>
		<div class="el-container">
		<div class="left_info">
			<ul>
			<router-link v-for="item in items" :to="{ path: item.path }" tag="li" active-class="active" :key="item.id">
            {{ item.name }}
            </router-link>
			</ul>
		</div>
		<div class="right_info">
				<keep-alive>
					<router-view></router-view>
				</keep-alive>
		</div>
		</div>
		<div class="el-footer">
			
		</div>
	</div>
</template>

<script>
export default {
	name: 'stu',
	data: function() {
		return {
			msg: '欢迎来到博伦小世界！一起来遨游学习的海洋吧！！！',
			user: '退出',
			items:[
				{
					name:'个人资料',
					path:'information',
					active:true
				},
				{
					name:'查看包间',
					path:'seek_house',
					active:false
				},
				{
					name:'审批记录',
					path:'record_solve',
					active:false
				},
				{
					name:'申请记录',
					path:'record_history',
					active:false
				}
			]
		};
	},
	methods: {
		jump() {
			if (this.user === '退出') {
				this.$router.replace('/#');
			} else {
				this.$router.replace('/login');
			}
		},
		errorHandler() {
			return true;
		}
	}
};
</script>

<style scoped>
.header {
	padding: 0;
	height: 45px;
	width: 100%;
	color: lightgrey;
	background-color: rgba(45, 45, 45, 0.9);
	font-size: 19px;
	line-height: 45px;
}
.header span:first-child {
	float: left;
	margin-left: 100px;
}
.header a {
	float: right;
	color: lightgrey;
	margin-right: 20px;
}
.header a:hover {
	color: lightcoral;
}
.header span {
	float: right;
	margin-right: 50px;
	cursor: pointer;
}
.avatar{
	position: relative;
	height: 185px;
	width: 100%;
	background-image: url(../../assets/bear.png);
	background-size:100% 700px;
	background-position-y: 560px;
}
.user{
	position: absolute;
	left: 470px;
	top: 78px;
	color: white;
	font-size: 24px;
	font-weight: 600;
}
#head{
	position: absolute;
	left: 300px;
	top: 32px;
},
.el-container{
	/* border: 1px solid forestgreen; */
}
.left_info{
	float: left;
	width: 256px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);
	margin-left: 100px;
	height: 630px;
	background-color: white;
	margin-top: 20px;
}
.active{
	background-color: rgb(227,65,21);
	color: white;
}
.right_info{
	float: right;
	background-color: white;
	width: 100%;
	margin-left: 30px;
	height: 630px;
	margin-top: 20px;
	margin-right: 100px;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.05);

}
ul{
	list-style: none;
}
ul li{
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-left: -25px;
	margin-bottom: 50px;
	border-radius: 2.5px;
	padding: 5px;
	cursor: pointer;
}
.el-footer{
	background-color: rgb(38,39,40);
	width: 100%;
	height: 240px;
	margin-top: 100px;
}
</style>
